<script setup lang="ts">
const { id } = defineProps(['id'])
onMounted(() => {
  // 获取商品信息
  console.log('获取商品信息Id: ', id)
})
</script>

<template>
  <div class="container">
    <div class="shop">
      <div class="shop-left">
        <img class="avatar" alt="avatar" src="http://localhost:4000/src/assets/img/avatar.jpg" />
        <div class="shop-name">
          <span class="name">FancyBox</span>
          <span class="label">盒子推荐</span>
        </div>
      </div>
      <div class="shop-info">
        <div class="shop-num">
          <span class="label">宝贝数量</span>
          <span class="num">1000</span>
        </div>
        <div class="sell-num">
          <span class="label">店铺销量</span>
          <span class="num">1000/月</span>
        </div>
        <div class="mark">
          <span class="label">店铺评分</span>
          <span class="num">4.8</span>
        </div>
        <div class="serve">
          <span class="label">店铺服务</span>
          <span class="num">暂无</span>
        </div>
      </div>
      <div class="operate">
        <button>联系客服</button>
        <button>进入店铺</button>
      </div>
    </div>
    <div class="product">
      <div class="show">
        <div class="product-show">
          <div class="big-img"><img src="http://localhost:4000/src/assets/img/slider2.png" alt="avatar" /></div>
          <div class="imgs">
            <div><img src="http://localhost:4000/src/assets/img/slider2.png" alt="avatar" /></div>
            <div><img src="http://localhost:4000/src/assets/img/slider2.png" alt="avatar" /></div>
            <div><img src="http://localhost:4000/src/assets/img/slider2.png" alt="avatar" /></div>
            <div><img src="http://localhost:4000/src/assets/img/slider2.png" alt="avatar" /></div>
          </div>
        </div>
        <div class="pay-param">
          <span class="product-name"><span class="label">新品</span>衣柜收纳神器分层置物架柜子隔板网篮宿舍衣橱衣服裤子包包收纳篮</span>
        </div>
      </div>
      <div class="info-comment">
        <div class="nav"></div>
        <div class="info">
          <img src="http://localhost:4000/src/assets/img/slider2.png" alt="avatar" />
        </div>
        <div class="comment"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
$containerWidth: 1112px;

.container {
  margin: auto;
  padding-top: 32px;
  width: $containerWidth;

  .shop {
    width: $containerWidth;
    height: 64px;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    padding: 4px;
    align-items: center;
    justify-content: space-between;

    .shop-left {
      display: flex;

      .avatar {
        border-radius: 4px;
        width: 56px;
        height: 56px;
      }

      .shop-name {
        margin-left: 8px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;

        .name {
          font-size: 20px;
          font-weight: 600;
        }

        .label {
          background-color: $redFont;
          color: white;
          font-size: 10px;
          text-align: center;
          max-width: fit-content;
          border-radius: 4px;
          height: 20px;
          line-height: 20px;
          padding: 0 4px;
          font-weight: 600;
        }
      }
    }

    .shop-info {
      display: flex;
      width: 320px;
      min-width: 320px;
      justify-content: space-between;

      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 8px;

        span:nth-child(1) {
          font-size: 16px;
          color: $darkHover;
          font-weight: 600;
        }
      }
    }

    .operate {
      button {
        width: 100px;
        height: 40px;
        margin-left: 8px;
        border: none;
        border-radius: 4px;
        background-color: $redLight;
        color: $redFont;
        font-weight: 600;
      }

      button:hover {
        background-color: $redFont;
        color: white;
      }
    }
  }

  .product {
    margin-top: 32px;
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;

    .show {
      display: flex;

      .product-show {
        margin: 16px;
        width: calc($containerWidth / 2);

        .big-img {
          width: calc($containerWidth / 2);
          height: calc($containerWidth / 2);
          display: flex;
          align-items: center;
          background-color: $darkLight;
          border-radius: 4px;

          img {
            width: 100%;
          }
        }

        .imgs {
          display: flex;
          height: 80px;
          margin-top: 32px;

          div {
            margin-right: 4px;
            height: 60px;
            width: 60px;
            display: flex;
            align-items: center;
            background-color: $darkLight;
            border-radius: 4px;
            cursor: pointer;

            img {
              width: 100%;
              object-fit: contain;
            }
          }
        }
      }

      .pay-param {
        margin: 16px;
        width: calc($containerWidth / 2);

        .label {
          padding: 4px;
          border-radius: 4px;
          background-color: $redFont;
          font-weight: 800;
          font-size: 12px;
          color: white;
        }

        .product-name {
          font-size: 20px;
          font-weight: 800;
          user-select: text;
        }
      }
    }
  }
}

@media screen and (width <= 1120px) {
  $containerWidth: 720px;

  .container {
    width: $containerWidth;

    .shop {
      width: $containerWidth;

      .shop-info {
        display: none;
      }
    }
  }
}

@media screen and (width <= 740px) {
  $containerWidth: 400px;

  .container {
    width: $containerWidth;

    .shop {
      width: $containerWidth;

      .shop-info {
        display: none;
      }
    }
  }
}
</style>
